import React, { useState } from 'react'
import MyHead from '../../components/MyHead'
import { useNavigate, Link } from 'react-router-dom';
import { CloseOutline } from 'antd-mobile-icons'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { ShowError, ShowSuccess } from './../../utils/message';
import { reg } from '../../utils/validate';
import FormCaptcha from '../../components/FormCaptcha';
import InputPass from '../../components/InputPass';
import { Ajax } from './../../api/api';
const FindPass = () => {
    const router = useNavigate()
    const [form] = Form.useForm()
    const [phone, setPhone] = useState<any>('')
    const onFinish = async (value: any) => {
        let res = await Ajax.checkPhone({
            phone: value.phone
        }) as any;
        if (res.code == 200) {
            let res2: any = await Ajax.verifyCaptcha({
                phone: value.phone,
                captcha: value.captcha
            }).catch(err => {
                Toast.show({
                    icon: 'fail',
                    content: '验证码校验失败',
                    duration: 1000,
                })
            })
            if (res2.data) {
                let res3: any = await Ajax.changepass({
                    phone: value.phone,
                    password: value.password
                })
                if (res3.code == 200) {
                    router('/login')
                    ShowSuccess('密码重置成功')
                }
            }
        }
    }
    return (
        <div className='findpass pg'>
            <MyHead title='找回密码' >
                <div onClick={() => router(-1)} style={{ display: 'flex', alignItems: 'center', color: '#f50' }}>
                    <CloseOutline />
                </div>
            </MyHead>
            <div className="fbox pd10">
                <Form
                    form={form}
                    layout={'horizontal'}
                    initialValues={{

                    }}
                    onFinish={onFinish}
                    onFinishFailed={() => ShowError('数据校验失败')}
                    footer={
                        <div>
                            <Button block type='submit' color='success' size='middle'>
                                确认修改
                            </Button>
                            <Button block type='reset' className='mt10' color='danger' size='middle'>
                                重置
                            </Button>
                        </div>
                    }
                >
                    <Form.Header>通过手机号找回密码哦~</Form.Header>
                    <Form.Item
                        name='phone'
                        label='手机号'
                        rules={[
                            { required: true },
                            { pattern: reg.phone, message: '请输入正确的手机号' }
                        ]}
                    >
                        <Input placeholder='请输入' clearable onChange={setPhone} />
                    </Form.Item>

                    <FormCaptcha
                        phone={phone}
                        name='captcha'
                    />

                    <InputPass
                        label='新密码'
                        name='password'
                        placeholder='请输入'
                    />

                    <Form.Item >
                        <div className="links flex ">
                            <Link to='/reg' className='link1'>注册</Link>
                            <Link to='/login' className='color2'>登录</Link>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default FindPass